<template>
    <div class="equipment-task-monitoring public-box">
        <el-row :gutter="20">
            <el-col :span="24">
                <v-chart :options="option1" auto-resize />
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <v-chart :options="option2" auto-resize />
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'EquipmentTaskMonitoring',
    data() {
        return {
            // 设备监控统柱状图和折线图
            option1: {
                color:['#45db5d','#ffaa00','#ff7467','#685289','#e89084','#669acc'],
                title : {
                    text: '任务监测',
                    left:'center',
                    top: 10,
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['已完成任务','已创建任务', '已过期任务'],
                    bottom: 10
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'已完成任务',
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    },
                    {
                        name:'已创建任务',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    },
                    {
                        name:'已过期任务',
                        type:'bar',
                        data:[3.6, 8.9, 6.0, 22.4, 21.7, 80.7, 165.6, 142.2, 38.7, 13.8, 5.0, 6.3],
                    },
                ]
            },
            //  用户操作统计
            option2: {
                color:['#45db5d','#ffaa00','#ff7467','#685289','#e89084','#669acc'],
                title : {
                    text: '任务监测',
                    x:'center',
                    top: 20
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:['已完成任务','已创建任务', '已过期任务'],
                },
                series : [
                    {
                        name: '文件监控',
                        type: 'pie',
                        radius : '60%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'已完成任务'},
                            {value:310, name:'已创建任务'},
                            {value:335, name:'已过期任务'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
        }
    },
    props: {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    methods: {

    },
    created() {

    },
    mounted() {

    }
}
</script>

<style scoped lang="less">
.equipment-task-monitoring {
    /deep/ .echarts {
        height: 500px;
        width: 100%;
        border: 1px #ccc solid;
        border-radius: 5px;
        margin-top: 10px;
    }
}
</style>
